<template>
    <div id="root">
        <PageTitle>商品详情页</PageTitle>
        <div class="pages-top pages-scroll">
            <Swiper height="80vw" :list="productImg"></Swiper>
            <div class="product-content">
                <h4>{{product.goodsName}} {{product.teaName}} {{product.year}}{{product.season}} {{product.classifyName}} {{product.odor}} {{product.goodsClass}} {{product.netContent}}克</h4>
                <span class="money">醉品价 </span><span class="money">{{product.price|money}}</span>
                <div class="product-active">
                    <div>促销</div>
                    <div>
                        <p><span>直降</span>已优惠￥0(10折)</p>
                        <p><span>包邮</span>全场在线支付满59元免运费</p>
                    </div>
                </div>
                <div class="product-active">
                    <div>服务</div>
                    <div>
                        <ul>
                            <li>全场商品90天保价</li>
                            <li>30天无忧退换货</li>
                            <li>满59元免运费</li>
                            <li>2000城市货到付款</li>
                        </ul>
                    </div>
                </div>
                <div class="product-active">
                    <div>数量</div>
                    <div class="count">
                        <span @click="count<=1?count=1:count--">-</span><span>{{count}}</span><span @click="count++">+</span> 
                    </div>
                </div>
                
            </div>
            <div class="product-details">
                <div class="details-flex">
                    <div @click="isColor='商品介绍';type='GoodsIntroduce'" :class="{'heigh-light':isColor=='商品介绍'}">商品介绍</div>
                    <div @click="isColor='规格参数';type='GoodsSpecification'" :class="{'heigh-light':isColor=='规格参数'}">规格参数</div>
                    <div @click="isColor='全部评论';type='GoodsComment'" :class="{'heigh-light':isColor=='全部评论'}">全部评论</div>
                </div>
                <div id="re">
                    <transition name="com">
                        <keep-alive>
                            <component :is="type"></component>
                        </keep-alive>
                    </transition>
                </div>
            </div>
        </div>
        <div id="buy">
            <div><img src="../../static/icon/shop-car.svg"></div>
            <div>立即购买</div>
            <div @click="shoppingClick">加入购物车</div>
        </div>
    </div>
</template>
<script>
import PageTitle from "../components/PageTitle.vue";
import {Swiper} from "vux";
import {mapState} from "vuex";
import GoodsIntroduce from "../components/GoodsIntroduce.vue";
import GoodsSpecification from "../components/GoodsSpecification.vue";
import GoodsComment from "../components/GoodsComment.vue";
export default {
    components:{PageTitle,Swiper,GoodsIntroduce,GoodsSpecification,GoodsComment},
    mounted(){
        this.$store.dispatch("requestProduct",{_id:this.$route.params.id});
    },
    computed:{
        ...mapState([
            "product",
            "productImg"
        ]),
    },
    data(){
        return {
            count:1,
            isColor:"商品介绍",
            type:"GoodsIntroduce"
        }
    },
    methods:{
        shoppingClick(){
            if(!sessionStorage.userInfo){
                return location.hash = "/login";
            }
            this.$store.dispatch("requestAddShoppingCart",{
                _id:this.product._id,
                count:this.count
            })
        }
    }
}
</script>
<style scoped>
    #root{
        background-color: #f4f4f4;
        height: 100vh;
        z-index: 40;
    }
    .product-content{
        padding: 0 2.8vw;
        background-color: white;
    }
    .money{
        font-size: 3.4vw;
    }
    .money:nth-of-type(2){
        color: red;
    }
    .product-active{
        display: flex;
        font-size: 3.4vw;
        border-top: #f4f4f4 solid 1px;
        padding: 2vw 0;
    }
    .product-active div:nth-of-type(1){
        width: 20%;
        
    }
    .product-active div:nth-of-type(2){
        width: 80%;
    }
    p span{
        padding: 0 1vw;
        color: white;
        background-color: red;
        margin-right: 2.8vw;
        border-radius: 1vw;
    }
    ul{
        margin: 0;
        padding: 0;
        font-size: 3.36vw;
        color: #b0b0b0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }
    li::before{
        content: "■";
        color: red;
        margin-right: 0.48vw;
    }
    li{
        width: 50%;
    }
    .count{
        font-weight: 700;
        font-size: 4.48vw;
    }
    .count span:nth-of-type(1){
        display: inline-block;
        padding: 1vw 2.8vw;
        border: black 1px solid;
        border-radius: 1vw 0 0 1vw;
    }
    .count span:nth-of-type(2){
        display: inline-block;
        padding: 1vw 4.8vw;
        border-top: black 1px solid;
        border-bottom: black 1px solid;
        color: #999;
    }
    .count span:nth-of-type(3){
        display: inline-block;
        padding: 1vw 2.8vw;
        border: black 1px solid;
        border-radius:0 1vw 1vw 0;
    }
    .product-details{
        margin-top: 2.8vw;
        background-color: white;
    }
    .details-flex{
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        font-size: 3.92vw;
        background-color: #FAFAFA;
    }
    .details-flex div{
        padding: 2.8vw 0;
        flex-grow: 1
    }
    .heigh-light{
        color: #ff3600;
    }


    .com-enter{
        transform: translate(-100%,0);
        opacity: 0;
    }
    .com-enter-active,.com-leave-active{
        transition: all 0.7s; 
         position: absolute; 
    }
    .com-enter-to{
        transform: translate(0,0);
        opacity: 1;
    }
    .com-leave{
        transform: translate(0,0);
        opacity: 1;
    }
    .com-leave-to{
        transform: translate(100%,0);
        opacity: 0;
    }
    #re{
        position: relative;
    }
    #buy{
        display: flex;
        justify-content: space-around;
        text-align: center;
        height: 12.2vw;
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        line-height: 12.2vw;
        font-size: 3.92vw;
        color: white;
    }
    #buy img{
        width: 7vw;
        height: 7vw;
    }
    #buy div:nth-of-type(1){
        height: 100%;
        flex-grow: 1;
        padding-top: 2vw;
        background-color: white;
    }
    #buy div:nth-of-type(2){
        height: 100%;
        flex-grow: 1;
        background-color: #FF8766;
    }
    #buy div:nth-of-type(3){
        height: 100%;
        flex-grow: 1;
        background-color: #FF3600;
    }
</style>